<template>
  <div class="course">
    <!-- 课程列表 -->
    <Panel shadow :padding="10" style="display: flex;">
      <div style="font-size:28px; font-weight: 800; color: #23315f; margin: 20px 0;"> 所有课程</div>
      <div v-for="(item, index) in course_list" :key="index" class="course_item">
        <el-card :body-style="{ padding: '0px' }" >
          <img @click="goCourse(item.id)" :src="item.course_img" fit="contain" class="course_image">
          <div style="padding: 14px;">
            <div class="course_title">{{item.name}}</div>
            <!-- <p class="teather-info">{{item.teacher.name}}{{item.teacher.brief}} <span>{{item.chapter_section}}</span></p> -->
            <div v-if="item.course_type==false && item.minprice>=0"  >
              <span class="discount_price" >限时折扣：￥{{item.minprice}}元</span>
              <span class="original_price" >{{item.price}}</span>
            </div>
            <div v-if="item.minprice>=0"  style="margin-top:5px">
              <i class="el-icon-user" style="font-size: 12px; display: inline-block;"></i>
              <p style="font-size:12px; display: inline-block; " >{{item.students}}人已加入学习</p >
              <el-button v-if="!item.pay" size="mini" class="course_button" @click="buyAll(item.id)">
                <div>立即购买</div>
              </el-button>
              <el-button v-else size="mini" class="course_button" @click="goCourse(item.id)" style="background-color: #1bdd80;" >
                <div>进入课程</div>
              </el-button>
            </div>
            <div v-else>
              <el-button size="mini" class="course_button" style="margin-bottom:20px">
                <div>{{item.chapter_section}}</div>
              </el-button>
            </div>
          </div>
        </el-card>
      </div>
    </Panel>
  </div>
</template>

<script>
  import api from '@oj/api'
  import { mapGetters } from 'vuex'
  // import utils from '@/utils/utils'
  import { USER_TYPE } from '@/utils/constants'

  export default {
    name: 'Course',
    data () {
      return {
        category: 0,
        course_list: []
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init () {
        this.getCourseList()
      },
      getCourseList () {
        api['getCourse']().then((res) => {
          this.course_list = res.data.data
          console.log(this.course_list)
          this.$emit('getfinish')
        }).catch()
      },
      goCourse (id) {
        console.log(id)
        this.$router.push({name: 'course-detail', params: {course_id: id}})
      },
      buyAll (id) {
        this.preorder = {
          goodsId: id,
          type: 'All'
        }
        const {href} = this.$router.resolve({
          name: 'preorder',
          query: this.preorder,
          params: this.course
        })
        window.open(href, '_blank')
      }
    },
    computed: {
      ...mapGetters(['user', 'theme']),
      isAdmin () {
        return this.user.admin_type === USER_TYPE.SUPER_ADMIN
      }
    }
  }
</script>



<style lang="less" scoped>
  .course_item {
    width: 270px;
    float: left;
    background: #fff;
    margin-bottom: 24px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid #d7d7d7;
    position: relative;
    margin-right: 5px;
  }

  .course_image {
    height: 180px;
    width: 100%;
  }

  .course_title {
    font-weight: 600;
    font-size: 20px;
  }
  
  .course_button {
    float: right;
    padding: 8px; 
    background-color:tomato;
    color: white;
  }

  .discount_price{
    color: red;
    font-weight: 600;
    font-size: 16px;
  }

  .original_price{
    color: rgb(103, 107, 110);
    text-decoration: line-through;
  } 

</style>
